<template>
	<div class="mine-container">
		<div class="bg"></div>
		<image class="vein" src="http://cdn.rzico.com/v4.0/mine-bg.png"></image>
		<!-- <div class="status-bar" :style="{height:statusBarHeight + 'px'}"></div> -->
		<!-- <navbar class="navbarc">
			<navbar-item type="back"></navbar-item>
		    <navbar-item type="title">
		        <text class="text">我的钱包</text>
		    </navbar-item>
		</navbar> -->
		<myNavbar title="我的钱包"></myNavbar>
		<scroller>
			<div class="share-center">
				<div class="deposit">
					<div class="deposit-center">
						<div class="deposit-amount">
							<text class="amount-text">总金额(元)</text>
							<text class="amount">{{ memberInfo.balance }}</text>
							<text class="tips">总金额包含冻结金额 {{ memberInfo.freezeBalance || 0 }} 元</text>
						</div>
						<button class="deposit-button" text="提现" model="green" @click="goCashOut"></button>
					</div>
				</div>
				<div class="shopCard-bottom pd-L30 pd-R30">
					<div v-for="item in recordList">
						<div class="shopCard-bottom-list">
							<image class="shopCard-bottom-list-icon" :src="item.icon"></image>
							<div class="bottom-item">
								<div class="shopCard-bottom-list-top">
									<text class="shopCard-bottom-list-top1">{{ item.memo }}</text>
									<!-- <text class="shopCard-bottom-list-top2">￥ {{ item.type === 0 || item.type === 2 ? '+' : '-' }} {{ item.type === 0 || item.type === 2 ? item.credit : item.debit }}</text> -->
									<text :class="['shopCard-bottom-list-top2', item.type == 1 || item.type == 3 ? 'redColor' : '']">￥{{item.credit-item.debit }}</text>
								</div>
								<div class="shopCard-bottom-list-bottom">
									<text>{{ item.createDate }}</text>
									<text>余额：{{ item.balance }}</text>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<loading class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
				<!-- <text class="indicator-text">Loading ...</text> -->
				<loading-indicator class="indicator"></loading-indicator>
			</loading>
		</scroller>
	</div>
</template>
<script>
const modal = weex.requireModule('modal');
const eeui = app.requireModule('eeui');
const storage = weex.requireModule('storage')
import { list, depositList } from '../../api/shareCenter';
import myNavbar from '../../components/myNavbar/myNavbar.vue'
export default {
	name: '',
	components: {
		myNavbar
	},
	data() {
		return {
			statusBarHeight: eeui.getStatusBarHeightPx(),
			memberInfo: {},
			member: 0,
			rebate: 0,
			pageNum: 1,
			pageSize: 10,
			recordList: [],
			loadinging: false,
			iconUrl: ['wallet-consumption.png', 'wallet-income.png']
		};
	},
	created() {
		this.recordList = [];
		this.pageNum = 1;
		this.initShareCenter();
	},
	methods: {
		initShareCenter() {
			list().then(res => {
				let memberInfo = res.data;
				memberInfo.balance = Number(memberInfo.balance).toFixed(2);
				memberInfo.freezeBalance = Number(memberInfo.freezeBalance).toFixed(2);
				this.$set(this.$data, 'memberInfo', memberInfo);
			}).catch(err => {
				console.log(err);
			});
			this.getRecordList(1);
		},
		getRecordList(one) {
			// 加载账单记录
			this.loadinging = true;
			let params = {
				pageNum: this.pageNum,
				pageSize: this.pageSize
			};
			depositList(params).then(res => {
				let recordList = this.recordList;
				res.data.data.forEach(item => {
					item.createDate = this.formatTime(item.createDate);
					item.debit = Number(item.debit).toFixed(2);
					item.credit = Number(item.credit).toFixed(2);
					item.balance = Number(item.balance).toFixed(2);
					if (item.type == 0) {
						item.icon = 'http://cdn.rzico.com/v4.0/wallet-consumption.png';
					} else if (item.type == 1) {
						item.icon = 'http://cdn.rzico.com/v4.0/wallet-income.png';
					} else if (item.type == 2) {
						item.icon = 'http://cdn.rzico.com/v4.0/wallet-consumption.png';
					} else if (item.type == 3) {
						item.icon = 'http://cdn.rzico.com/v4.0/wallet-income.png';
					}
					recordList.push(item);
				});
				this.recordList = recordList;
				this.loadinging = false;
				eeui.loadingClose();
				// 达到最大页数则提示
				let maxPageNum = Math.ceil(res.data.total / this.pageSize);
				if (this.pageNum > maxPageNum && !one) {
					modal.toast({ message: '已经没有更多数据', duration: 1 });
				}
			}).catch(err => {
				console.log(err);
				this.loadinging = false;
			});
		},
		goCashOut() {
			eeui.openPage({
                url: 'root://pages/cashOut/cashOut.js',
                statusBarType: 'immersion',
                statusBarStyle:false ,
				}, res => {
					if (res.status == 'stop') {
						storage.getItem('cashOut', result => {
							if (result.data == 'success') {
								this.recordList = []
								this.initShareCenter()
								storage.removeItem('cashOut')
							}
						});
					}
				})
		},
		onloading() {
			// 触底加载
			if (this.loadinging == false) {
				this.pageNum += 1;
				// modal.toast({ message: '加载中', duration: 1 });
				eeui.loading();
				this.getRecordList();
			}
		}
	}
};
</script>

<style scoped>
page {
	background: #f8f8f8;
}
.navbarc {
	width: 750px;
	height: 100px;
	/*margin-bottom: 50px;*/
	background-image: linear-gradient(to right, #B2FEFA, #0ED2F7);
}
.text {
	font-size: 28px;
	color: white;
}
.status-bar {
	background-image: linear-gradient(to right, #B2FEFA, #0ED2F7);
}
.page-navbar {
	width: 750px;
	height: 90px;
}
.page-navbar-title {
	color: #ffffff;
	font-size: 28px;
}
.mine-container {
	position: relative;
	background-color: rgba(248, 248, 248, 1);
}

.bg {
	position: absolute;
	left: 0;
	top: 90px;
	width: 750px;
	height: 600px;
	background-image: linear-gradient(to bottom, rgb(194, 194, 194), rgba(248, 248, 248, 1));
}

.vein {
	position: absolute;
	width: 750px;
	height: 600px;
}

.share-center {
	/* position: absolute; */
	width: 750px;
}
.deposit {
	padding: 30px;
}
.deposit-center {
	padding: 50px 20px;
	padding-bottom: 0;
	background-color: #fff;
	display: flex;
	align-items: center;
	flex-direction: column;
	/* border: 1px solid #f1f1f1; */
	box-shadow: 1px 8px 5px #f1f1f1;
	border-radius: 14px;
}
.deposit-amount {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.amount-text {
	font-size: 30px;
	margin-top: 20px;
}
.amount {
	margin-top: 20px;
	height: 60px;
	line-height: 60px;
	font-size: 60px;
}
.tips {
	margin-top: 10px;
	font-size: 30px;
	color: #b6b6b6;
}
.deposit-rebate {
	margin-top: 40px;
	display: flex;
	flex-direction: row;
	font-size: 28px;
	justify-content: space-around;
	color: #b6b6b6;
}
.rebate {
	display: flex;
	flex-direction: column;
	text-align: center;
}
.rebate-member {
	display: flex;
	flex-direction: column;
	text-align: center;
}
.rebate-number {
	margin-top: 20px;
	color: #000;
}
.deposit-button {
	display: flex;
	justify-content: center;
	margin: 40px 0;
	width: 400px;
	height: 90px;
	font-size: 30px;
	background-color: #07c160;
	color: #ffffff;
}

.shopCard-bottom {
	padding: 0 30px;
}
.shopCard-bottom-list {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 125px;
}

.shopCard-bottom-list-icon {
	width: 66px;
	height: 66px;
	margin-right: 20px;
}

.bottom-item {
	width: 604px;
	display: flex;
	justify-content: center;
}

.shopCard-bottom-list-top {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding-bottom: 5px;
}

.shopCard-bottom-list-top1 {
	font-size: 28px;
	font-weight: 400;
	color: #1a1a1e;
	/* border: #6d9584 solid 1px; */
	/* height: 40px; */
	display: -webkit-box;
	word-break: break-all;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
}

.shopCard-bottom-list-top2 {
	font-size: 24px;
	font-family: PingFangSC;
	font-weight: bold;
	color: #1a1a1e;
}

.redColor {
	color: #ea716a;
}

.shopCard-bottom-list-bottom {
	/* padding-top: 10px; */
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	font-size: 24px;
	font-family: PingFangSC;
	font-weight: 400;
	color: #1a1a1e;
	opacity: 0.3;
}

.redColor {
	color: #ea716a;
}
.loading {
	width: 750px;
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;
	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;
	align-items: center;
}
.indicator {
	margin-top: 16px;
	height: 40px;
	width: 40px;
	color: blue;
}
</style>
